<template>
  <div class="intro-container">
    <h2>歌手简介</h2>

    <div class="intro">
      <p :class="{text:isShow }">{{singerData.briefDesc}}</p>
       <!-- 完整简介 -->
     <div>
       <div class="full" v-if="isShow" @click="getDOM">完整歌手介绍 <van-icon name="arrow-down" /></div>
       <div class="full" v-else @click="getDOM">收起 <van-icon name="arrow-up" /></div>
     </div>

    </div>
    <h2 class="hot">热门单曲</h2>
  </div>
</template>

<script>
export default {
  props: {
    singerData: {
      type: [Array, Object],
      require: true
    }
  },
  data () {
    return {
      isShow: true
    }
  },
  created () {

  },

  methods: {
    getDOM () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="less" scoped>
    .intro-container{

   h2{
      font-size: 18px;
    z-index: 2;
    margin-top: -5px;
    padding: 15px;
    background: #fff;
    font-weight: 700;
      border-bottom: 1px solid #ccc;
   }

    }
  .intro{
    padding: 10px;
    font-size: 13px;
    color: #666;
    .text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }
    .full{
      margin-top: 5px;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
